<template>
  <div>
    <div>
      <el-button
        type="primary"
        style="margin-bottom: 1em;"
        @click="addOrUpdateHandle()"
      >
        创建轮播图
      </el-button>
    </div>
    <el-radio-group
      v-model="imgType"
      @change="getPage"
    >
      <el-radio-button
        label="主页"
        value="0"
      />
      <el-radio-button
        label="商城"
        value="1"
      />
    </el-radio-group>
    <!--
    <el-segmented
      v-model="optionalParameters"
      :options="imgOptions"
      @change="pushOptions"
    />
    -->

    <!-- 列表相关区域 -->
    <el-table
      v-loading="loading"
      :data="Data"
      :stripe="true"
      :border="true"
      row-key="imgId"
      highlight-current-row
      style="width: 100%;"
    >
      <!-- 图片 -->
      <el-table-column
        label="图片"
        prop="imgUrl"
        align="center"
        width="300px"
      >
        <template #default="scope">
          <img
            :src="`${scope.row.imgUrl}`"
            style="width: 100%; height: 100%;"
          >
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="图片ID"
        prop="imgId"
        align="center"
      /> -->
      <el-table-column
        label="创建时间"
        prop="createTime"
        align="center"
      />
      <el-table-column
        label="更新时间"
        prop="updateTime"
        align="center"
      />
      <!--
      <el-table-column
        label="状态"
        prop="status"
        align="center"
      />
      -->
      <el-table-column
        label="图片类型"
        prop="imgType"
        align="center"
      />
      <el-table-column
        label="删除"
        prop="seq"
        align="center"
      >
        <template #default="scope">
          <el-button
            :loading="deleteLoading"
            type="danger"
            @click="deleteHandle(scope.row.imgId)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <!--
      <el-table-column
        label="序号"
        prop="seq"
        align="center"
      />
      -->
      <el-table-column
        label="链接"
        prop="linkUrl"
        align="center"
      />
    </el-table>
    <AddOrUpdate
      :add-or-update-visible="dialogVisible"
      @close="dialogClose"
    />
  </div>
</template>

<script setup>
import * as api from '@/api/platform/index-img'
import AddOrUpdate from './components/add-or-update.vue'

const loading = ref(false)
const Data = ref()

onMounted(() => {
  getPage()
})
const imgType = ref(0)
const optionalParameters = ref({
  // 主页0，商城1，粉丝社区2
  type: imgType
})

const getPage = () => {
  loading.value = true
  api.getIndexImg(optionalParameters.value)
    .then(res => {
      Data.value = res
      loading.value = false
    })
    .catch(() => {
      ElMessage.error('获取数据失败')
      loading.value = false
    })
}

const deleteLoading = ref(false)
const deleteHandle = (inImgId) => {
  deleteLoading.value = true
  api.deleteIndexImg({
    imgId: inImgId
  })
    .then(() => {
      getPage()
      ElMessage.success('删除成功')
      deleteLoading.value = false
    })
    .catch(() => {
      ElMessage.error('删除失败')
      deleteLoading.value = false
    })
}

// TODO:
const dialogVisible = ref(false)
function addOrUpdateHandle () {
  dialogVisible.value = true
}

function dialogClose () {
  dialogVisible.value = false
  getPage()
}
</script>
